<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="js/vendor/d3.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
	(function () {
		var data = getRandomData();

		var canvasHeight = 600;
		var canvasWidth = 600;

		var svg = d3
			.select("body")
			.append("svg")
			.attr("height", canvasHeight)
			.attr("width", canvasWidth);

		svg.append("rect").attr("fill", "#cccccc").attr("width", canvasWidth).attr("height", canvasHeight);

		var canvas = svg.append("g").attr("transform", "translate(20,20)");

		var color = d3.scale.category10();

		var treemap = d3.layout.treemap()
			.size([400,400])
			.nodes(data);

		var node = canvas.selectAll(".node")
			.data(treemap)
			.enter()
			.append("g")
			.attr("class", ".node");

		node.append("rect")
			.attr("x", function(d) { return d.x})
			.attr("y", function(d) { return d.y})
			.attr("width", function(d) { return d.dx})
			.attr("height", function(d) { return d.dy})
			.attr("stroke", "#ccc")
			.attr("fill", function(d) { return d.children ? "transparent" : color(d.parent.name)});

		node.append("text")
			.attr("x", function(d) { return d.x + d.dx/2} )
			.attr("y", function(d) { return d.y + d.dy/2} )
			.attr("text-anchor", "middle")
			.attr("font-size", 9)
			.text(function (d) {
				return d.children ? null : d.name;
			});

		function getRandomData() {
			return {
				name: "pName",
				value: Math.floor(Math.random()*5) + 1,
				children: (function () {
					var d1 = [];
					for (var n1 = 0; n1 < Math.round(Math.random() * 15); n1++) {
						d1[d1.length] = {
							name: "name" + n1,
							value: Math.floor(Math.random() * n1) + 1,
							children: (function () {
								var d2 = [];
								for (var n2 = 0; n2 < Math.round(Math.random() * 15); n2++) {
									d2[d2.length] = {
										name: "name" + n1 + n2,
										value: Math.floor(Math.random() * n2) + 1
									}
								}
								return d2;
							}())

						}
					}
					return d1;
				}())
			};
		}
	}());
</script>
</body>
</html>